@import "tailwindcss";

@theme {
  --color-text-color: #f3e5ab;
  --color-accent-color: #cccccc;
  --color-light-bg-color: #fafafa;
  --color-dark-bg-color: #242424;
  --font-display:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@layer base {
  :root {
    font-family: var(--font-display);

    color-scheme: light dark;
    background-color: var(--color-dark-bg-color);
  }

  body {
    @apply m-0 min-w-[20rem];
  }
}

@media (prefers-color-scheme: light) {
  :root {
    background-color: var(--color-light-bg-color);
  }
}

@utility main-section {
  @apply w-[100vw] h-[100vh] flex flex-col items-center justify-between bg-[url('https://picsum.photos/1920/1080')]
  before:content-[''] before:fixed before:inset-0 before:-z-10 before:w-full before:h-full before:bg-cover
  before:bg-center before:blur-md;
}

@utility time-text {
  @apply text-text-color uppercase text-[6rem] font-bold my-[2rem] mx-auto;
}

@utility link-style {
  @apply text-[0.5rem] m-[0.5rem] text-accent-color no-underline;
}
